import { useIntl } from '@umijs/max';
import { ConfigProvider, Table } from 'antd';
import React from 'react';
import { fitChartSize } from '../utils/tools';
import Styles from './StationEventWarning.less';
/**
 * 定义事件对象的结构
 * @param eventKey {number} - 事件的唯一标识符。
 * @param eventTime {number} - 事件的时间戳。
 * @param eventStatus {string} - 事件的当前状态。
 * @param eventPloy {string} - 事件中执行的策略描述。
 */
export interface WarningIEvent {
  eventRank?: React.ReactNode;
  eventType?: string;
  eventLocation?: string;
}

export interface StationEventProps {
  eventType?: string;
  StationEventData?: WarningIEvent[];
}

const StationEvent: React.FC<StationEventProps> = ({ StationEventData }) => {
  const intl = useIntl();
  // 动态生成列
  const getColumns = () => {
    let columns = [
      {
        title: intl.formatMessage({ id: 'bigdata.S/N' }),
        dataIndex: 'eventRank',
        key: 'eventRank',
      },
      {
        title: intl.formatMessage({ id: 'bigdata.alarm' }),
        dataIndex: 'eventType',
        key: 'eventType',
      },
      {
        title: intl.formatMessage({ id: 'bigdata.location' }),
        dataIndex: 'eventLocation',
        key: 'eventLocation',
        ellipsis: true,
      },
    ];

    return columns;
  };

  const nodataNode = () => (
    <div>
      <div style={{ paddingTop: '25px' }}>
        <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(0 1)" fill="none" fillRule="evenodd">
            <ellipse fill="#f6f6f6" cx="32" cy="33" rx="32" ry="7"></ellipse>
            <g fillRule="nonzero" stroke="#dedede">
              <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
              <path
                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                fill="#fbfbfb"
              ></path>
            </g>
          </g>
        </svg>
      </div>
      <div style={{ color: '#fff' }}>No data</div>
    </div>
  );

  return (
    <div>
      <ConfigProvider
        theme={{
          components: {
            Table: {
              cellPaddingBlock: fitChartSize(8),
              cellFontSize: fitChartSize(12),
              algorithm: true,
              headerBg: '#0F2035',
              headerColor: '#5381CC',
              headerSplitColor: 'transparent',
              rowHoverBg: 'transparent',
              rowSelectedBg: 'transparent',
              rowSelectedHoverBg: 'transparent',
              colorBgContainer: 'transparent',
            },
          },
        }}
      >
        <Table
          dataSource={StationEventData}
          columns={getColumns()}
          rowClassName={Styles.bigDataTableRow}
          className={Styles.eventTable}
          locale={{
            emptyText: nodataNode,
          }}
          pagination={false}
        />
      </ConfigProvider>
    </div>
  );
};

export default StationEvent;
